<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>新日暮里温泉馆</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="/css/layui.css"  media="all">
  <link rel="stylesheet" href="/css/serch.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
		   <style>
        /*html, body, #container {
            height: 100%;
            width: 100%;
        }*/

        .content-window-card {
            position: relative;
            box-shadow: none;
            bottom: 0;
            left: 0;
            width: auto;
            padding: 0;
        }

        .content-window-card p {
            height: 2rem;
        }

        .custom-info {
            border: solid 1px silver;
        }

        div.info-top {
            position: relative;
            background: none repeat scroll 0 0 #F9F9F9;
            border-bottom: 1px solid #CCC;
            border-radius: 5px 5px 0 0;
        }

        div.info-top div {
            display: inline-block;
            color: #333333;
            font-size: 14px;
            font-weight: bold;
            line-height: 31px;
            padding: 0 10px;
        }

        div.info-top img {
            position: absolute;
            top: 10px;
            right: 10px;
            transition-duration: 0.25s;
        }

        div.info-top img:hover {
            box-shadow: 0px 0px 5px #000;
        }

        div.info-middle {
            font-size: 12px;
            padding: 10px 6px;
            line-height: 20px;
        }

        div.info-bottom {
            height: 0px;
            width: 100%;
            clear: both;
            text-align: center;
        }

        div.info-bottom img {
            position: relative;
            z-index: 104;
        }

        span {
            margin-left: 5px;
            font-size: 11px;
        }

        .info-middle img {
            float: left;
            margin-right: 6px;
        }
    </style>
		<script type="text/javascript" src="/js/jquery.min.js" ></script>
		<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.8&key=a1661afb10b214933c08f95f60668d52"></script>
		<script src="/layui.js" charset="utf-8"></script>
		
<style>
	.test{
		height: 100px;
		font-size:70px; 
		color:black;
		font-family: "biaoti";
		text-align: center;
		}
	.part2{
			color:#3F3F3F;
			font-family: "zhengwen";
			width: 90%;
			margin: 0px auto;
			}
		span{
			color:#3F3F3F;
			font-family: "zhengwen";
			font-size: 20px;
			line-height: 30px;
		}
		.part{
			color:#3F3F3F;
			font-family: "zhengwen";
			width: 90%;
			height: 460px;
			margin: 10px auto;
			padding-left: 80px;
			font-size: 20px;
			line-height: 30px;
			}
			.part1{
				color:#3F3F3F;
				font-family: "zhengwen";
				width: 600px;
				height: 450px;
				line-height: 50px;
				float: left;
				}
				.area{
					height: 200px; 
					width: 650px; 
					border: solid 1px #E5E5E5;
					font-size: 20px;
					background: #FFFFFF;
					box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
					-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
					-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;  
					line-height: 25px;
					} 

</style>
  <script type="text/javascript">
  </script>  

</head>
<body>
<ul class="layui-nav" style="background-color: IndianRed4; position: fixed;width: 100%;z-index: 1200;">
  <li class="layui-nav-item">
    <a href="/index.html">主页</a>
  </li>
	 <li class="layui-nav-item">
	  <a href="/index.html#yuyue">预约</a>
	</li>
	 <li class="layui-nav-item">
	  <a href="/index.html#jianjie">简介</a>
	</li>
	 <li class="layui-nav-item">
	  <a href="/index.html#wenquan">温泉</a>
	</li>
	<li class="layui-nav-item">
	  <a href="/index.html#meishi">美食</a>
	</li>
	<li class="layui-nav-item">
	  <a href="/index.html#jiaotong">交通</a>
	</li>
	<li class="layui-nav-item">
	  <a href="/order/allOpinion">查看评价</a>
	</li>
  <li class="layui-nav-item" lay-unselect="" style="float: right;">
    <a href="javascript:;"><img src="/img/ic_sanso.svg" class="layui-nav-img">我的账号</a>
    <dl class="layui-nav-child">
      <shiro:hasRole name="group"><dd><a href="/mycart.html">购物车</a></dd></shiro:hasRole>
      <dd><a href="/memberinfo.html">个人主页</a></dd>
      <dd><a href="/order/all">历史订单</a></dd>
      <dd><a href="/logout">注销</a></dd>
    </dl>
  </li>
</ul>
<br/>
<br/>
<br/>
<br/>
<br/>
<fieldset class="layui-elem-field layui-field-title" >
		  <legend><img src="/img/ic_honkan.svg" width="30px">&nbsp;&nbsp;写下您的入住体验&nbsp;帮助我们做得更好</legend>
		</fieldset>
<br/>
<div class="part">
	<span th:text="'房型：'+${rtname}">豪华家庭房</span><br>
	<span th:text="'入住日期：'+${checkin}">入住日期：2019年7月2日</span><br>
	<div id="test3" style="height: 50px;"></div><br>
<!-- 	<div class="layui-upload">
	  <button type="button" class="layui-btn" id="test2">上传图片</button> 
	  <blockquote class="layui-elem-quote layui-quote-nm" style="width: 600px; margin-top: 10px;">
	    <font size="3">预览图：</font>
	    <div class="layui-upload-list" id="demo2"></div>
	 </blockquote>
	</div> -->
	评语：<br>
	<textarea class="area" id="opinion"></textarea><br>
	<button type="button" th:onclick="submit([[${odid}]])"  class="layui-btn layui-btn-danger layui-btn-sm" style="font-size: 14px; width: 88px; height: 40px;">
		提交评价</button>
	<br />
	<br />
</div>



<script src="/layui.js" charset="utf-8"></script>
<script>
layui.use('element', function(){
  var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
  
  //监听导航点击
  element.on('nav(demo)', function(elem){
    //console.log(elem)
    layer.msg(elem.text());
  });
});

layui.use(['carousel', 'form'], function(){
  var carousel = layui.carousel
  ,form = layui.form;
  
  //事件
  carousel.on('change(test4)', function(res){
    console.log(res)
  });
  
  var $ = layui.$, active = {
    set: function(othis){
      var THIS = 'layui-bg-normal'
      ,key = othis.data('key')
      ,options = {};
      
      othis.css('background-color', '#5FB878').siblings().removeAttr('style'); 
      options[key] = othis.data('value');
      ins3.reload(options);
    }
  };
  
  //监听开关
  form.on('switch(autoplay)', function(){
    ins3.reload({
      autoplay: this.checked
    });
  });
  
  $('.demoSet').on('keyup', function(){
    var value = this.value
    ,options = {};
    if(!/^\d+$/.test(value)) return;
    
    options[this.name] = value;
    ins3.reload(options);
  });
  
  //其它示例
  $('.demoTest .layui-btn').on('click', function(){
    var othis = $(this), type = othis.data('type');
    active[type] ? active[type].call(this, othis) : '';
  });
});

layui.use('upload', function(){
  var $ = layui.jquery
  ,upload = layui.upload;
  
  //普通图片上传
  var uploadInst = upload.render({
    elem: '#test1'
    ,url: '/upload/'
    ,before: function(obj){
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $('#demo1').attr('src', result); //图片链接（base64）
      });
    }
    ,done: function(res){
      //如果上传失败
      if(res.code > 0){
        return layer.msg('上传失败');
      }
      //上传成功
    }
    ,error: function(){
      //演示失败状态，并实现重传
      var demoText = $('#demoText');
      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
      demoText.find('.demo-reload').on('click', function(){
        uploadInst.upload();
      });
    }
  });
  
  //多图片上传
  upload.render({
    elem: '#test2'
    ,url: '/upload/'
    ,multiple: true
    ,before: function(obj){
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img" width="200px">')
      });
    }
    ,done: function(res){
      //上传完毕
    }
  });
  

  
  //多文件列表示例
  var demoListView = $('#demoList')
  ,uploadListIns = upload.render({
    elem: '#testList'
    ,url: '/upload/'
    ,accept: 'file'
    ,multiple: true
    ,auto: false
    ,bindAction: '#testListAction'
    ,choose: function(obj){   
      var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
      //读取本地文件
      obj.preview(function(index, file, result){
        var tr = $(['<tr id="upload-'+ index +'">'
          ,'<td>'+ file.name +'</td>'
          ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
          ,'<td>等待上传</td>'
          ,'<td>'
            ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
            ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
          ,'</td>'
        ,'</tr>'].join(''));
        
        //单个重传
        tr.find('.demo-reload').on('click', function(){
          obj.upload(index, file);
        });
        
        //删除
        tr.find('.demo-delete').on('click', function(){
          delete files[index]; //删除对应的文件
          tr.remove();
          uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
        });
        
        demoListView.append(tr);
      });
    }
    ,done: function(res, index, upload){
      if(res.code == 0){ //上传成功
        var tr = demoListView.find('tr#upload-'+ index)
        ,tds = tr.children();
        tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
        tds.eq(3).html(''); //清空操作
        return delete this.files[index]; //删除文件队列已经上传成功的文件
      }
      this.error(index, upload);
    }
    ,error: function(index, upload){
      var tr = demoListView.find('tr#upload-'+ index)
      ,tds = tr.children();
      tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
      tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
    }
  });
  
  //绑定原始文件域
  upload.render({
    elem: '#test20'
    ,url: '/upload/'
    ,done: function(res){
      console.log(res)
    }
  });
  
});

	var val;
layui.use(['rate'], function(){
  var rate = layui.rate;

  //半星效果
  rate.render({
    elem: '#test3'
    ,value: 2.5 //初始值
    ,half: true //开启半星
    ,choose: function(value){
        val = value;
    }
  })
  
  //主题色
  rate.render({
    elem: '#test10'
    ,value: 3
    ,theme: '#FF8000' //自定义主题色
  });
  rate.render({
    elem: '#test11'
    ,value: 3
    ,theme: '#009688'
  });
 
  rate.render({
    elem: '#test12'
    ,value: 2.5
    ,half: true
    ,theme: '#1E9FFF'
  })
  rate.render({
    elem: '#test13'
    ,value: 2.5
    ,half: true
    ,theme: '#2F4056'
  });
  rate.render({
    elem: '#test14'
    ,value: 2.5
    ,half: true
    ,theme: '#FE0000'
  })
});

function submit(odid) {
    $.ajax({
        url:"/order/giveOpinion",
        type:"post",
        data:{
            odid:odid,
            grade:val,
            opinion:$("#opinion").val()
        },
        success:function(data){
        	alert(data);
        	window.location.href="/orderlist.html";
        }
    });
}

$(function(){
    $.ajax({
       type:"get",
       url:"header.html",
       async:true,
       success:function(data){
          $("#header").html(data);
       }
    });
 });
</script>


</body>
</html>
